<?xml version="1.0" encoding="UTF-8"?>
<ui:composition template="/WEB-INF/templates/portalTemplate.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:my="http://java.sun.com/jsf/composite/components">
	<ui:define name="content">

		<h:form>

			<rich:panel>
				<f:facet name="header">
					<h:outputText value="Lista lekcji" />
				</f:facet>
				<rich:toolbar id="menu">
					<a4j:commandButton action="#{lessonsBrowser.goToCourses()}"
						value="Wróc do kursów" immediate="true" styleClass="buttonSmall" />

					<rich:toolbarGroup>
						<a4j:region>

							<a4j:commandButton value="Dodaj lekcję" styleClass="buttonSmall"
								action="#{lessonsBrowser.add()}" render="@form"
								disabled="#{lessonsBrowser.editMode}">

							</a4j:commandButton>

							<a4j:commandButton value="Edytuj lekcję" styleClass="buttonSmall"
								action="#{lessonsBrowser.edycja()}" render="@form"
								disabled="#{lessonsBrowser.selection==null or lessonsBrowser.editMode}">
							</a4j:commandButton>

							<a4j:commandButton value="Pytania lekcji"
								styleClass="buttonSmall"
								action="#{lessonsBrowser.goToQuestions()}"
								disabled="#{lessonsBrowser.selection==null or lessonsBrowser.editMode}">
							</a4j:commandButton>
						</a4j:region>
					</rich:toolbarGroup>
				</rich:toolbar>
				<rich:panel id="edycjaPanel" rendered="#{lessonsBrowser.editMode}">

					<a4j:region>
						<h:panelGrid columns="3">

							<ui:decorate template="/layout/field.xhtml">
								<ui:param name="label" value="Nr lekcji" />
								<ui:param name="id" value="nrLekcji" />
								<ui:param name="required" value="true" />
								<h:inputText id="nrLekcji"
									value="#{lessonsBrowser.lesson.number}" required="true" />
							</ui:decorate>

							<ui:decorate template="/layout/field.xhtml">
								<ui:param name="label" value="Wyświetl na stronie" />
								<ui:param name="id" value="widocznoscKursu" />
								<ui:param name="required" value="false" />
								<h:selectBooleanCheckbox id="widocznoscKursu"
									value="#{lessonsBrowser.lesson.enabled}" />
							</ui:decorate>

							<ui:decorate template="/layout/field.xhtml">
								<ui:param name="label" value="Cel" />
								<ui:param name="id" value="wprowadzenieLekcja" />
								<ui:param name="required" value="false" />
								<h:inputTextarea id="wprowadzenieLekcja"
									value="#{lessonsBrowser.lesson.introduction}" cols="50" />
							</ui:decorate>

							<ui:decorate template="/layout/field.xhtml">
								<ui:param name="label" value="Zadanie domowe" />
								<ui:param name="id" value="pracaLekcja" />
								<ui:param name="required" value="false" />
								
								<rich:editor id="pracaLekcja"
									value="#{lessonsBrowser.lesson.homework}" toolbar="custom">
									<f:facet name="config">
				                    toolbar_custom:
				                        [
				                            { name: 'document', items : [ 'NewPage','Preview' ] },
				                            { name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
				                            { name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','Scayt' ] },
				                            { name: 'insert', items : [ 'Table','HorizontalRule','Smiley','SpecialChar','PageBreak' ] },
				                                    '/',
				                            { name: 'styles', items : [ 'Styles','Format' ] },
				                            { name: 'basicstyles', items : [ 'Bold','Italic','Strike','-','RemoveFormat' ] },
				                            { name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote' ] },
				                            { name: 'links', items : [ 'Link','Unlink' ] }
				                        ]
				                    </f:facet>
								</rich:editor>
					
					
					
							</ui:decorate>

							<ui:decorate template="/layout/field.xhtml">
								<ui:param name="label" value="Opis" />
								<ui:param name="id" value="opisKursu" />
								<ui:param name="required" value="false" />
								<ui:param name="labelWidth" value="100px" />
								<h:inputTextarea id="opisKursu"
									value="#{lessonsBrowser.lesson.description}" cols="50" />
							</ui:decorate>

						</h:panelGrid>
						<h:panelGrid columns="5">
							<a4j:commandButton id="submit" action="#{lessonsBrowser.save()}"
								value="Zapisz" render="@form,tabela" execute="@region" styleClass="buttonSmall" />
							<a4j:commandButton id="cancel" immediate="true"
								action="#{lessonsBrowser.closeEditMode()}" render="@form"
								value="Wyjdź" styleClass="buttonSmall">
							</a4j:commandButton>
						</h:panelGrid>

					</a4j:region>

				</rich:panel>


				<rich:extendedDataTable value="#{lessonsBrowser.lessons}" var="_row"
					id="tabela" selectionMode="single"
					selection="#{lessonsBrowser.selection}">
					<a4j:ajax event="selectionchange" render="menu" immediate="true" />


					<rich:column>
						<f:facet name="header">
							<h:outputText value="Numer" />
						</f:facet>
						<h:outputText value="#{_row.number}"
							style="#{_row.enabled ? '' : 'color:grey;'}" />
					</rich:column>

					<rich:column>
						<f:facet name="header">
							<h:outputText value="Cel" />
						</f:facet>
						<h:outputText value="#{_row.introduction}"
							style="#{_row.enabled ? '' : 'color:grey;'}" />
					</rich:column>

					<rich:column>
						<f:facet name="header">
							<h:outputText value="Opis" />
						</f:facet>
						<h:outputText value="#{_row.description}"
							style="#{_row.enabled ? '' : 'color:grey;'}" />
					</rich:column>
					<rich:column>
						<f:facet name="header">
							<h:outputText value="Praca domowa" />
						</f:facet>
						<h:outputText value="#{_row.homework}"
							style="#{_row.enabled ? '' : 'color:grey;'}" />
					</rich:column>
					<rich:column>
						<f:facet name="header">
							<h:outputText value="Widoczność" />
						</f:facet>
						<h:outputText value="#{_row.enabled?'Tak':'Nie'}"
							style="#{_row.enabled ? '' : 'color:grey;'}" />
					</rich:column>
				</rich:extendedDataTable>



			</rich:panel>

		</h:form>
	</ui:define>

</ui:composition>